import React from 'react';
import styled from 'styled-components';
import logo from '../images/logo-image.png';

// Styling components with Styled Components

const HeaderContainer = styled.div`
  justify-content: space-around;
  font-family: 'Open Sans', sans-serif;
  transition: 0.5s all;
  position: fixed;
  display: flex;
  margin: 0;
  width: 100%;

  height: ${props => props.height};
  background-color: ${props => props.backgroundColor};
`;

const HeaderBrand = styled.div`
  margin: auto 2rem;

  img {
    transition: 0.5s all;
    max-height: 70px;
    height: ${props => props.height};
  }
`;

const HeaderNavbar = styled.ul`
  transition: 0.6s all;
  list-style: none;
  display: inline-flex;
  margin: auto 0;

  @media screen and (max-width: 768px) {
    left: 0;
    display: flex;
    opacity: 0;
    flex-direction: column;
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    width: ${window.innerWidth}px;
    height: auto;
    padding: 100px 1rem 1rem;

    li {
      text-align: center;
    }
  }
`;

const NavbarItem = styled.a`
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  color: #c4c4c4;
  margin: auto 0.5rem;
  cursor: pointer;

  &:hover {
    color: #fff;
  }

  @media screen and (max-width: 768px) {
    margin: 2rem auto;
  }
`;

const MenuIcon = styled.li`
  font-size: 36px;
  color: #c4c4c4;
  display: none;
  margin: auto 0;

  &:hover {
    color: #fff;
  }

  @media screen and (max-width: 768px) {
    position: relative;
    display: flex;
  }
`;

class Header extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      navbarLinks: [
        { label: "Sobre", url: "about" },
        { label: "Cronograma", url: "cronogram" },
        { label: "Metodologia", url: "metodology" },
       // { label: "Atividades", url: "#activities" },
      ],
      pageScrolled: false,
      menuShown: false,
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
    window.addEventListener('resize', this.handleRezise);
  }

  handleScroll = () => {
    if (window.scrollY >=1) {
      this.setState({
        pageScrolled: true,
      });
    }
    else {
      this.setState({
        pageScrolled: false,
      });
    }
  }

  handleRezise = () => {
    const deviceWidth = window.innerWidth;
    document.getElementById('navbar').style.width=deviceWidth;
    console.log(window.innerWidth)
  }

  handleMenu = () => {
    const navbar = document.getElementById('navbar');

    if (this.state.menuShown === false) {
      navbar.style.opacity='1';
      this.setState({
        menuShown: !this.state.menuShown,
      });
    }
    else {
      navbar.style.opacity='0';
      this.setState({
        menuShown: !this.state.menuShown,
      });
    }
  }

  render() {
    const { pageScrolled } = this.state;
    return (
      <HeaderContainer 
        backgroundColor={ pageScrolled?'rgba(0,0,0,0.8)':'transparent' }
        height={ pageScrolled?'70px':'100px' }
        >
        <HeaderBrand height={ pageScrolled?'50px':'70px' }>
          <img src={ logo } alt="A random thing"/>
        </HeaderBrand>
        <HeaderNavbar id="navbar">
        { /* Using JS .map() to iterate each one of the values in the array */}
          { this.state.navbarLinks.map(link => {
            return (
              <li key={ link.index }>
                <NavbarItem key={ link.label }>[- { link.label } -]</NavbarItem> 
              </li>
            )
          }) }
        </HeaderNavbar>
        <MenuIcon onClick={this.handleMenu}>
          <i class="fa fa-bars"></i>
        </MenuIcon>
      </HeaderContainer>
    )
  }
}

export default Header;
